<html>

<head>
    <meta charset="utf-8">
    <title>查询页面</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f9e7c9; /* 淡橙色背景 */
            margin: 0;
            padding: 0;
        }

        h1 {
            text-align: center;
            color: #ff9933; /* 橙红色标题 */
        }

       .input-group {
            display: flex;
            flex-direction: row;
            align-items: center;
            margin-bottom: 15px;
        }

        label {
            width: 120px;
            text-align: right;
            margin-right: 10px;
            color: #886633; /* 深褐色标签文字 */
        }

        input[type="text"] {
            flex: 1;
            padding: 5px;
            border: 1px solid #ff9933; /* 橙红色输入框边框 */
            border-radius: 3px;
        }

        button {
            padding: 8px 15px;
            background-color: #ff9933;
            color: white;
            border: none;
            border-radius: 3px;
            cursor: pointer;
        }

        #result-container {
            margin-top: 20px;
            border: 1px solid #ff9933; /* 橙红色结果容器边框 */
            padding: 10px;
            min-height: 100px;
        }

        /* 页面整体布局 */
        #page-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 20%;
            width: 60%;
            height: 100vh;
        }

        /* dogimg 样式 */
        #dogimg {
            margin-right: 1%;
        }

        /* container 样式 */
        #container {
            background-color: #fff9e5; /* 更淡的橙色容器背景 */
            width: 400px;
            margin: 50px auto;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

        /* 给页面底部添加一个鲜艳的颜色条 */
        footer {
            background-color: #ffcc66; /* 更鲜艳的橙色底部条 */
            padding: 10px;
            text-align: center;
            color: #333;
        }
    </style>
</head>

<body>
    <div id="page-container">
        <div id="dogimg">
            <img src="https://haowallpaper.com/link/common/file/previewFileImg/15918089447001472" width="300px">
        </div>
        <div id="container">
            <h1>智能门禁</h1>
            <div class="input-group">
                <label for="id">输入 id 查询：</label>
                <input type='text' id='id' name='id'>
                <button onclick="id_test()">提交</button>
            </div>
            <div class="input-group">
                <label for="name">输入名字查询：</label>
                <input type='text' id='name' name='name'>
                <button onclick="name_test()">提交</button>
            </div>
            <button onclick="all_test()">查询历史记录</button>
            <div id="result-container"></div>
        </div>
    </div>
    <footer>页面底部信息</footer>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        function id_test() {
            var user_info = {
                id: document.getElementById("id").value
            }
            $.ajax({
                type: "post",
                url: "http://47.120.76.102:8080/display_by_id",
                data: JSON.stringify(user_info),
                dataType: "json",
                success: function (res, statu, xhr) {
                    var finalHtml = "";
                    if (res == null) {
                        finalHtml += '<div>' + "没有查询到任何结果" + '</div>';
                    } else {
                        for (var data of res) {
                            finalHtml += '<div>' + data.id + " " + data.name + " " + data.time + '</div>';
                        }
                    }
                    document.getElementById("result-container").innerHTML = finalHtml;

                },
                error: function (xhr) {
                    alert(JSON.stringify(xhr));
                }
            });
        }
    </script>
    <script>
        function name_test() {
            var user_info = {
                name: document.getElementById("name").value
            }
            $.ajax({
                type: "post",
                url: "http://47.120.76.102:8080/display_by_name",
                data: JSON.stringify(user_info),
                dataType: "json",
                success: function (res, statu, xhr) {
                    var finalHtml = "";
                    if (res == null) {
                        finalHtml += '<div>' + "没有查询到任何结果" + '</div>';
                    } else {
                        for (var data of res) {
                            finalHtml += '<div>' + data.id + " " + data.name + " " + data.time + '</div>';
                        }
                    }
                    document.getElementById("result-container").innerHTML = finalHtml;

                },
                error: function (xhr) {
                    alert(JSON.stringify(xhr));
                }
            });
        }
    </script>
    <script>
        function all_test() {
            $.ajax({
                type: "post",
                url: "http://47.120.76.102:8080/display_all_note",
                dataType: "json",
                success: function (res, statu, xhr) {
                    var finalHtml = "";
                    if (res == null) {
                        finalHtml += '<div>' + "没有查询到任何结果" + '</div>';
                    } else {
                        for (var data of res) {
                            finalHtml += '<div>' + data.id + " " + data.name + " " + data.time + '</div>';
                        }
                    }
                    document.getElementById("result-container").innerHTML = finalHtml;

                },
                error: function (xhr) {
                    alert(JSON.stringify(xhr));
                }
            });
        }
    </script>
</body>

</html>